let color = ["#334552", "#B34335", "#6E9FA5", "#A2C3AC", "#C8846C"];
import {
    ref,
    computed,
    watchEffect
} from 'vue'
import gsap from 'gsap'

export default function (gepRef, maxSize) {
    let maxNumRef = computed(() => {
        return Math.max(...gepRef.value.map(item => item.value));
    })

    let gdps = ref([])
    let gdpsTarget = computed(() => {
        console.log('computed', maxNumRef);
        return gepRef.value.map((item, i) => {
            return {
                ...item,
                color: color[i % color.length],
                size: item.value * (maxSize / maxNumRef.value)
            }
        })

    })

    watchEffect(() => {
        gdpsTarget.value.forEach((ele, i) => {
            if (!gdps.value[i]) {
                gdps.value[i] = {
                    ...ele,
                    value: 0,
                    size: 0
                }
            }
            gsap.to(gdps.value[i], {
                size: ele.size,
                value: ele.value,
                duration: 1
            });


        });
    })


    return {
        gdps
    }



}